import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

import basicSsl from '@vitejs/plugin-basic-ssl'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    VitePWA({
      registerType: 'autoUpdate', // 如果此项值为autoUpdate，则为自动给更新
      manifest: {
          name: 'demo name', // 项目名
          id: "csdn",
          short_name: 'MyApp',
          description: '一个Vite PWA测试APP', 
          theme_color: '#DC143C', // 红 // 用于设置工具栏的颜色，并且可以反映在任务切换器中的应用预览中。theme_color 应与文档标头中指定的 meta 主题颜色一致。
          background_color: '#FFFF00', // 黄-首次在移动设备上启动应用时，启动画面会使用 background_color 属性。
          display: "minimal-ui", // 您可以自定义应用启动时显示的浏览器界面。例如，您可以隐藏地址栏和浏览器界面元素
          icons: [		//添加图标，注意路径和图像像素正确，sizes必须和图片的尺寸一致
            {
              src: 'logo.png',
              sizes: '500x500', // 大于144
              type: 'image/png',
            },
            
          ],
          screenshots: [ //
            {
              "src": "111.png",
              "type": "image/png",
              "sizes": "540x720", 
              "form_factor": "narrow"
            },
            {
              "src": "222.png",
              "type": "image/png",
              "sizes": "720x540",
              "form_factor": "wide"
            }]
        },
      workbox: {
        // globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'],		// 缓存相关静态资源，这个放开会导致页面html被缓存，谨慎使用
      },
      devOptions: {
        enabled: true
      }
    }),
    basicSsl()
  ],
  server: {
    host: '0.0.0.0',
    https: true
  },
})
